﻿@{
    Layout = "~/Areas/Mall/Views/Shared/_HomeLayout.cshtml";
    var memberLogin = ViewData["WebHeadMember"] as MemberLogin;
}

<link rel="stylesheet" href="~/Areas/Mall/css/head.css">
<link rel="stylesheet" href="~/Areas/Mall/css/login.css">
<link rel="stylesheet" href="~/Areas/Mall/css/sticker.css">
<div class="reinstall">
    <div class="top">
        <span>姓名贴</span>
    </div>
    <div class="content">
        <input id="txtId" type="hidden" value="@(Model!=null?Model.Id:"")" />
        <input id="txtMemberId" type="hidden" value="@memberLogin.Id" />
        <div class="item">
            <span>姓名</span>
            <p><input id="txtName" type="text" class="input normal important" value="@(Model!=null?Model.Name:"")" maxlength="3"><span class="wrong"><img src="~/Areas/Mall/image/error.png" />请输入姓名</span></p>
        </div>
        <div class="item">
            <span>备注</span>
            <p><input id="txtRemark" type="text" class="input normal important" value="@(Model!=null?Model.Remark:"")" maxlength="11"><span class="wrong"><img src="~/Areas/Mall/image/error.png" />请输入备注</span></p>
        </div>
        <form id="uploadForm" enctype="multipart/form-data">
            <div class="item" style="display:inline-block">
                <span>二维码</span>
                <p>
                    <img id="txtQRCode" src="@(Model!=null?Model.QRCode:"")">
                    <input id="upload" name="file" accept="image/*" type="file" style="display: none" />
                    <span class="wrong">
                        <img src="~/Areas/Mall/image/error.png" />请上传二维码图片
                    </span>
                </p>
            </div>
        </form>
    </div>
    <div class="btn-wrap" style="position: static;">
        <input type="submit" value="预览" class="btn" onclick="save()">
        <input type="button" value="返回上一页" class="btn yellow" onclick="javascript:history.back(-1);">
    </div>

    <div class="print_preview">
        <div class="hide_print">
            <div class="scgwc-ul">
                <p class="sn-p2">姓名贴打印预览<span class="close">×</span></p>
                <!--图片-->
                <img src="" id="previewImg" class="previewImg" />
                <div class="scgwc-hj">
                    <span class="scgwc-s2">
                        <a class="btn violet" style="color: #ffffff; font-size: 16px;" onclick=print()>打印</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="~/Areas/Mall/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Areas/Mall/js/jquery.jqprint-0.3.js"></script>
<script type="text/javascript" src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(".item .important").blur(function () {
        if ($(this).val()) {
            $(this).parent().find('.wrong').hide();
            $(this).removeClass('error')
        } else {
            $(this).parent().find('.wrong').show();
            $(this).addClass('error')
        }
    });

    $(function () {
        $("#txtQRCode").click(function () {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change", function () {
                upload();
            });
        });
    });

    //上传
    function upload() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("UpLoadQrCodePic", "Sticker")',
            data: new FormData($('#uploadForm')[0]),
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.code == 0) {   // 上传成功
                    $('#txtQRCode').attr("src",res.data[0].src);
                    $("#txtQRCode").parent().find('.wrong').hide();
                    $("#txtQRCode").removeClass('error');
                } else {
                    $("#txtQRCode").parent().find('.wrong').show();
                    $("#txtQRCode").addClass('error');
                }
            }
        });
    }

    //检测
    function check() {
        var retBool = true;
        //姓名
        var realName = $("#txtName").val();
        if (realName == undefined || realName == null || realName == "") {
            $("#txtName").parent().find('.wrong').show();
            $("#txtName").addClass('error');
            retBool = false;
        } else {
            $("#txtName").parent().find('.wrong').hide();
            $("#txtName").removeClass('error');
        }

        //备注
        var userName = $("#txtRemark").val();
        if (userName == undefined || userName == null || userName == "") {
            $("#txtRemark").parent().find('.wrong').show();
            $("#txtRemark").addClass('error');
            retBool = false;
        } else {
            $("#txtRemark").parent().find('.wrong').hide();
            $("#txtRemark").removeClass('error');
        }

        //二维码
        var qrCode = $("#txtQRCode").attr("src");
        if (qrCode == undefined || qrCode == null || qrCode == "") {
            $("#txtQRCode").parent().find('.wrong').show();
            $("#txtQRCode").addClass('error');
            retBool = false;
        } else {
            $("#txtQRCode").parent().find('.wrong').hide();
            $("#txtQRCode").removeClass('error');
        }

        return retBool;
    }

    //保存
    function save() {
        if (check()) {
            var id = $("#txtId").val();
            var memberId = $("#txtMemberId").val();
            var name = $("#txtName").val();
            var remark = $("#txtRemark").val();
            var qrCode = $("#txtQRCode").attr("src");

            $.ajax({
                type: "POST",
                url: '@Url.Action("Save", "Sticker")',
                data: {
                    "Id": id,
                    "MemberId": memberId,
                    "Name": name,
                    "Remark": remark,
                    "QRCode": qrCode
                },
                success: function (res) {
                    if (res.Success) {
                        $("#txtId").val(res.Data.Id);
                        $(".print_preview .hide_print").show();
                        $("#previewImg").attr("src", res.Data.Url);
                    } else {
                        alert(res.Message)
                    }
                }
            });
        }
    }

    //打印预览
    $('.print_preview').on('click', '.hide_print', function (e) {
        $(this).parent().find('.hide_print').show();
        e.stopPropagation();
    });
    $('.print_preview').on('click', '.close', function (e) {
        $('.print_preview').find('.hide_print').hide();
        e.stopPropagation();
    });
    $('body:not(.print_preview)').on('click', function () {
        $('.print_preview').find('.hide_print').hide();
    });

    //打印
    function print() {
        $("#previewImg").jqprint({
            debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
            importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
            printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
            operaSupport: true//表
        });
    }
</script>